<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
  <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
  <style>
    a:hover { color: #fff; text-decoration: underline; }/* 鼠标移动到链接上 */
  </style>
</head>
<body>
<div class="layui-form" style="width:500px; height:auto; position:absolute;  left:50%;  top:50%;  margin:-100px 0 0 -150px;">
  <div class="layui-form-item">
    <label class="layui-form-label"><a style="color: #2D93CA" href="javascript:void(0);" onclick="downloadFile()">下载模板</a></label>
  </div>

  <div class="layui-form-item">
<!--    <label class="layui-form-label">上传文件</label>-->
    <div class="layui-input-item">
      <input class="layui-input layui-disabled" readonly="readonly" id="fileUpload" style="display: inline-block; width: 300px;">
<!--      <button onclick="selectFile()" type="button" class="layui-btn layui-btn-normal" style="display: inline-block"><i class="layui-icon">&#xe681;</i></button>-->
    </div>
  </div>
  <div class="layui-form-item">
<!--    <div className="layui-btn-container" style="margin: 50px 150px;">-->
<!--      <input type="file" id="fileInput" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;">-->
<!--      <button type="button" class="layui-btn layui-btn-primary" onclick="parent.layer.closeAll('iframe')">取消</button>-->
<!--      <button type="button" class="layui-btn" onclick="uploadFile()">确定</button>-->
<!--    </div>-->

    <div class="layui-btn-container">
      <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
      <button type="button" class="layui-btn" id="test9">开始导入</button>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/layer/layer.js"></script>
<script type="text/javascript">

  function downloadFile(){
    window.location.href='/user/table/importFile';
  }

  function selectFile(){
    //触发 文件选择的click事件
    $("#fileInput").trigger("click");
    var file = $("#fileInput")
    file.on('change',function (e){
      console.log(e)
      var name = e.currentTarget.files[0].name;
      var point = name.lastIndexOf(".");
      var type = name.substr(point);
      console.log(type)
      $("#fileUpload").val(name);
    })
  }

  function uploadFile(){

  }

  layui.use(['form','upload'],function (){
    var upload = layui.upload;
    var $ = layui.jquery;
//选完文件后不自动上传
    upload.render({
      elem: '#test8'
      ,url: '/user/table/uploadUserExcel' //此处配置你自己的上传接口即可
      ,auto: false
      ,exts: 'xls|xlsx'
      //,multiple: true
      ,bindAction: '#test9'
      , choose: function (obj) {
        //将每次选择的文件追加到文件队列
        var files = obj.pushFile();
        console.log(obj)
        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
        obj.preview(function (index, file, result) {
          console.log(index); //得到文件索引
          console.log(file.name); //得到文件对象
          console.log(result); //得到文件base64编码，比如图片

          $("#fileUpload").val(file.name);
          //获取文件名***************************
          //这里还可以做一些 append 文件列表 DOM 的操作

          //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
          //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
        });
      }
      ,done: function(res){
        parent.layui.table.reload('userTable');
        if (res.state == true){
          layer.msg('导入成功',{icon:1},function (){
            parent.layer.closeAll('iframe');
            parent.layui.table.reload("userTable");
            parent.layui.table.reload('currentCategoryTable');
          });
        }else {
          layer.msg(res.msg,{icon:2});
        }
      }
    });

  })

</script>
</html>
